{% extends '../temp_base.html' %}

{% block local_header_css_js %}
  <!-- DataTables -->
  <link rel="stylesheet" href="{{HTML_URL_BASE}}/plugins/datatables/dataTables.bootstrap.css">

{% end %}

{% block content %}
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        All hosts in DataCenter
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">Resource Management</a></li>
        <li class="active">DataCenter Host List</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box box-info">
            <div class="box-header with-border">
              <h3 class="box-title">DataCenter: <b>{{datacenter.name}}</b></h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="example1" class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th>NO</th>
                  <th>Host IP</th>
                  <th>Other IPs</th>
                  <th>Host Name</th>
                  <th>Server Type</th>
                  <th>OS type</th>
                  <th>Creator</th>
                  <th>Create Time</th>
                </tr>
                </thead>
                <tbody>
                {% for index, host in enumerate(datacenter.hosts, start=1) %}
                <tr>
                  <td>{{index}}</td><td>{{host.ip}}</td><td>{% if host.otherips %} {{host.otherips}} {%else%}&nbsp;{%end%}</td><td>{{host.name}}</td><td>{{host.servertype}}</td><td>{{host.ostype}}</td>
                  <td>{% if host.creator %} {{host.creator.name}} {%else%}&nbsp;{%end%}</td>
                  <td>{{host.createtime}}</td>
                </tr>
                {% end %}
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
{% end %}

{% block local_footer_css_js %}
<!-- DataTables -->
<script src="{{HTML_URL_BASE}}/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="{{HTML_URL_BASE}}/plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="{{HTML_URL_BASE}}/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="{{HTML_URL_BASE}}/plugins/fastclick/fastclick.js"></script>
<!-- page script -->
<script>
  $(function () {
    $("#example1").DataTable();
    
    $("#btn_create_host").click(function(){
        window.location.href='addhost';
    });
  });
</script>
{% end %}
